<template>
  <div class="wrapper">
    <div class="box">
      <div class="imgs">
        <img src="../assets/111.jpg" />
      </div>
      <div class="inp">
        <inp  @add="add"></inp>
      </div>
      
      <div class="lists" v-show="nofinishShow">
        <lists :list="this.nofinishList" @del="del" @changeCheck="changeCheck"></lists>
      </div>
      <hr>
       <div class="lists" v-show="finishShow">
        <lists :list="this.finishList" @del="del2" @changeCheck="changeCheck"></lists>
      </div>
      <div class="button">
        <Button @click="allShow">显示全部</Button>
        <Button @click="finShow">显示已完成</Button>
        <Button @click="nofinShow">显示未完成</Button>
        <Button @click="delChecked">删除选中</Button>
        <Button @click="delAll">删除全部</Button>
      </div>
    </div>
    
  </div>
</template>

<script>
import inp from '../components/inp.vue'
import lists from '../components/list.vue'
import Button from '../components/btn.vue'
export default {
  components: {inp,lists,Button},
  data() {
    return {
     finishList:[],
     nofinishList:[],
     nofinishShow:true,
     finishShow:true
    };
  },
  methods: {
    add(val){
      let obj={
        checked:false,
        title:val
      }
      this.nofinishList.push(obj)
      console.log(this.list);
    },
    del(val){
      console.log(val);
      this.nofinishList.splice(val,1)
    },
    del2(val){
      console.log(val);
      this.finishList.splice(val,1)
    },
    changeCheck(v,index){
     console.log(v,index);
     if(v===true){
       this.finishList.push(this.nofinishList[index])
       this.nofinishList.splice(index,1)
     }
     if(v===false){
       this.nofinishList.push(this.finishList[index])
       this.finishList.splice(index,1)
     }
    },
    allShow(){
      this.finishShow=true;
      this.nofinishShow=true;
    },
    finShow(){
      this.finishShow=true;
      this.nofinishShow=false;
    },
    nofinShow(){
      this.finishShow=false;
      this.nofinishShow=true;
    },
    delChecked(){
      this.finishList=[]
    },
    delAll(){
      this.finishList=[];
      this.nofinishList=[];
    }

  },
  mounted() {}
};
</script>

<style  scoped lang="scss">
.wrapper {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(90deg, #ffafbd, #ffc3a0);
  position: relative;
  .box {
    width: 440px;
    height: 600px;
    background: #f2f2f2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 20px;
    .imgs{
      width:100%;
      text-align: center;
    }
  }
  .inp{
    width: 100%;
    padding-left: 60px;
  }
  .lists{
    margin-top:20px; 
    margin-left: 40px;
  }
  .button{
    
  }
}
</style>